import React from 'react'
import { HashRouter as Router, Switch, Redirect, Route } from 'react-router-dom'
import { connect } from 'react-redux'
import { myLoader } from '../util'

const NotFound = myLoader(import('./common/NotFound'))
const NotLogin = myLoader(import('./common/NotLogin'))
const Login = myLoader(import('./login'))
const Home = myLoader(import('./home'))
const ProjectList = myLoader(import('./Project'))
const UserList = myLoader(import('./user'))
const UserEdit = myLoader(import('./user/Edit'))

function App({token,user}) {

    // console.log(token);

    function hasLogin(){
        return !!token
    }
    return (
        <Router>
            <Switch>
                <Route path="/home" render={
                    function( routeProps ){
                        return hasLogin() ? <Home/> : <NotLogin {...routeProps}/>
                    }
                }/>
                <Route path="/user/list" render={
                    function( routeProps ){
                        return hasLogin() ? <UserList/> : <NotLogin {...routeProps}/>
                    }
                }/>
                <Route path="/user/edit" render={
                    function( routeProps ){
                        return hasLogin() ? <UserEdit/> : <NotLogin {...routeProps}/>
                    }
                }/>
                <Route path="/project/list" render={
                    function( routeProps ) {
                        return hasLogin() ? <ProjectList/> : <NotLogin {...routeProps}/>
                    }
                }/>
                <Route path="/login" component={ Login }/>
                <Route path="/404" component={ NotFound }/>
                <Redirect path="/" to="/login" exact/>
                <Redirect to="/404"/>
            </Switch>
        </Router>
    )
}

const mapStateToProps = state => {
    return {
        token:state.common.token,
        user:state.common.userInfo
    }
}

export default connect(mapStateToProps)(App)